<template>
  <div>
    <div class="headBtns">
      <div style="float:left;display:inline-block;">
        <el-button type="danger" round size="small" @click="addShili('1')">添 加</el-button>
        <el-button type="danger" round size="small" @click="nonUse">批量删除</el-button>
      </div>
      <div style="float:right;display:inline-block">
        <el-select v-model="queryObj.zuzhi" placeholder="组织" style="width:120px" size="small">
          <el-option
            v-for="item in zuzhiList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="queryObj.gangweishuxing" placeholder="岗位属性" style="width:120px" size="small">
          <el-option
            v-for="item in gangweishuxingList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input
        size="small"
        style="width:220px"
        placeholder="请输入行事历名称或人员姓名"
        suffix-icon="el-icon-search"
        v-model="queryObj.shousuo">
        </el-input>
      </div>
    </div>
    <div class="w_list">
       <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column align="center" prop="shilimingchen" label="述职评议标题" width=""></el-table-column>
        <el-table-column align="center" prop="name" label="姓名"></el-table-column>
        <el-table-column align="center" prop="zuzhishuxing" label="所属组织"></el-table-column>
        <el-table-column align="center" prop="gangweishuxin" label="岗位属性" :formatter="Form_gangweishuxin"></el-table-column>
        <el-table-column align="center" label="上传时间" width="170">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="160">
          <template slot-scope="scope">
            <el-button type="text" @click="addShili('0',scope.row)">编辑</el-button>
            <el-button type="text" @click="delectA(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pager ref="pager" :requestUrl = "requestUrl" v-on:listenPagerEvent = "getPagerData" :requestParams="requestParams"></pager>

    </div>


    <!-- 添加弹窗 -->
    <el-dialog title="添加述职评议" :visible.sync="dialogVisible" width="670px">
      <el-form :model="upDataForm">
        <el-form-item label="人员组织" label-width="88px">
          <el-input v-model="upDataForm.zuzhishuxing"></el-input>
        </el-form-item>
        <el-form-item label="人员信息" label-width="88px">
          <el-select v-model="upDataForm.renyuanxinxi" placeholder="请选择人员" multiple style="width:100%" >
            <el-option label="张三" value="shanghai"></el-option>
            <el-option label="李四" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评议标题" label-width="88px">
           <el-input v-model="upDataForm.shilimingchen" placeholder="请输入评议标题"></el-input>
        </el-form-item>
        <el-form-item label="文件" label-width="88px">
           <el-input v-model="upDataForm.neirong" placeholder="请选择（仅支持pdf格式文件）"></el-input>
           <!-- 文件上传....... -->
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addClick">添 加</el-button>
      </div>
    </el-dialog>
    
  </div>
</template>



<script>

import Pager from "../common/pager.vue";
import {Loading} from 'element-ui'

export default {
    components: {Pager},
    data() {
      return {
        requestUrl:'/pcfe/txn/queryUserAvailablePositionList',   //请求地址
        currentPage: 1, //页码
        pageSize: 10,   //条数
        requestParams:{   //请求参数
          assetname: "",
          assetstatus: "",
        },
        dialogVisible:false,  //添加弹出框状态
        upDataForm:{       //添加行事历的表单
          zuzhishuxing:'本组织',   
          renyuanxinxi:[],
          shilimingchen:'',
          shilileixin:'01',
          neirong:'',
          date:'1'
        },

        tableData3: [{
          shilimingchen:'开学了',
          shilineirong:'的开发来看lkdf',
          shilileixin:'03',
          name: '王小虎',
          zuzhishuxing:'组织一',
          gangweishuxin: '02',
          date: '2016-05-03',
          zhuangtai: '02',
          }, {
          shilimingchen:'开学了',
          shilineirong:'的开发来看lkdf',
          shilileixin:'02',
          name: '王小虎',
          zuzhishuxing:'组织一',
          gangweishuxin: '02',
          date: '2016-05-03',
          zhuangtai: '01',
          }, {
          shilimingchen:'开学了',
          shilineirong:'的开发来看lkdf',
          shilileixin:'04',
          name: '王小虎',
          zuzhishuxing:'组织一',
          gangweishuxin: '02',
          date: '2016-05-03',
          zhuangtai: '03',
          }, {
          shilimingchen:'开学了',
          shilineirong:'的开发来看lkdf',
          shilileixin:'01',
          name: '王小虎',
          zuzhishuxing:'组织一',
          gangweishuxin: '01',
          date: '2016-05-03',
          zhuangtai: '04',
        }],

        multipleSelection: [],  //批量选择操作


        queryObj:{  //搜索查询
          zuzhi:"",//组织
          gangweishuxing:'',//岗位属性
          zhuangtai:"",    //状态
          shousuo:''     //搜索
        },


        zuzhiList:[
          {label:'党组织',value:'01'},
          {label:'共青团',value:'02'},
          {label:'少先队',value:'03'}
        ],
        gangweishuxingList:[
          {label:'党员',value:'01'},
          {label:'团员',value:'02'},
          {label:'小学生',value:'03'}
        ],
        zhuangtaiList:[
          {label:'学习中',value:'01'},
          {label:'高手',value:'02'},
          {label:'毕业了',value:'03'}
        ],
        
        fileName: '', //文件名称
        formData:{},  //文件导入的其他参数

      }
    },
    
    methods: {
      //获取分页数据
      getPagerData(data,pageSize,pageNum){
          this.tableData3 = data.list___;
          this.currentPage = pageNum;
          this.pageSize = pageSize;
      },

      // 添加批量操作
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      //
      Form_leixin(row,column){
        return row.shilileixin == '01' ? '周事例' : row.shilileixin == '02' ? '月事例' : row.shilileixin == '03' ? '季事例' : '半年事例'
      },
      //
      Form_zhuangtai(row,column){
        return row.zhuangtai == '01' ? '停用' : row.zhuangtai == '02' ? '启用' : row.zhuangtai == '03' ? '已归档' : '全部'
      },
      //
      Form_gangweishuxin(row,column){
        return row.gangweishuxin == '01' ? '书记' : row.gangweishuxin == '02' ? '党员' : '未知'
      },


      //添加事例 val='1'  //编辑行事历 val='0'
      addShili(val,row){
        let self = this;
        self.dialogVisible = true
      },

      //确认添加
      addClick(){
        let self = this;
        self.dialogVisible = false;


      },
      
      //批量停用
      nonUse(){
        
      },
      
      //删除
      delectA(row){
        let self = this;
        self.$confirm('系统将一并删除与本行事历有关联的所有任务，请谨慎操作。确认删除吗？','删除',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'info',
        }).then(function(){
          
        }).catch(function(){})
      },

    }
  }

</script>


<style scoped>
  .headBtns{
    width: 100%;
    height: 48px;
    line-height: 48px;
    /* border: 1px solid #FF5656; */
    padding: 0 10px;
    background:#fff
  }
  .w_list{
    margin-top: 25px;
    /* border: 1px solid #FF5656 */
  }


  .cf::before{
    display: block;
    clear: both;
    content: ""
  }



</style>